<template>
  <div class="details">
    <div class="details-part">
      <div class="nav-text">
        <a href="">首页</a>
        <a href="">历史</a>
        <a href="">党史</a>
        <a href="">恐怖</a>
        <a href="">自传</a>
        <a href="">专业</a>
        <a href="">科幻</a>
      </div>
      <div class="week-left">
        <!-- <div class="wtext">
          <span class="text1">本周精选</span>
          <span>查看全部</span>
        </div> -->
        <div class="tupin">
          <div class="imgb1">
            <img
              class="img3"
              src="../../public/img/gallery/best-books1.jpg"
              alt=""
            />
          </div>
          <div class="wtext-xq">
            <h1>龙之怒火</h1>
            <p class="zuozhe">埃文·温特</p>
            <p class="price2">$555.00</p>
            <div class="imgb3">
              <img
                class="img3"
                src="../../public/img/logo/xxb.png"
                alt=""
              /><span class="pinlunm">(120评论)</span>
            </div>
            <div class="cart">
              <button>添加到购物车</button>
              <div class="img4">
                <img src="../../public/img/logo/fx.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="miaoshu">
        <div class="miaoshu-nav">
          <span>描述</span>
          <span>作者</span>
          <span>评论</span>
        </div>
        <p class="p">
          BerylCook
          是英国最有才华和最有趣的艺术家之一。Beryl的照片描绘了各种体型和大小的女性享受着自己。Beryl
          Cook
          出生在两次世界大战之间，最终在15岁时离开了雷丁的肯德里克学校，在那里她去了秘书学校，然后进入保险办公室。在搬到伦敦和汉普顿之后，她最终一嫁给了她来自雷丁的隔壁邻居约翰库克。他是商船队的一名军官，1956年他离开大海后，他们买了一家酒吧一年，然后约翰在南罗得西亚的一家汽车公司找到了一份工作。Beryl给他们的小儿子买了一盒水彩画，在教他如何使用时，她觉得自己很喜欢画画。约翰随后为她买了一套儿童画作作为她的生日礼物，并由此创作了她的第一幅重要作品，一幅黑皮肤女士的半身像，表情空洞，乳房下垂。它被Beryl的丈夫恰当地命名为“宿醉”
          尝试计划为一个人设计的膳食常常令人沮丧。尽管如此，我们还是看到越来越多的食谱书和互联网网站致力于为人们做饭。离婚和离开上大学的配偶或成年子女的死亡都是习惯于为多人做饭的人突然需要学习如何将以前使用的所有烹饪实践调整为对一个人更有效的简化烹饪计划的原因创造较少的人。
        </p>
      </div>
      <!-- 加入实时通讯 -->
      <div class="join">
        <div class="joinbox">
          <div>
            <img
              class="img5"
              src="../../public/img/gallery/section-bg1.jpg"
              alt=""
            />
          </div>
          <div class="join-up">
            <h2>加入时事通讯</h2>
            <a href="">订阅</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.details-part {
  width: 100%;
  background-color: rgb(255, 252, 252);
  .nav-text {
    margin: auto;
    // background-color: aquamarine;
    height: 60px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      font-size: 18px;
    }
  }
  .week-left {
    height: 450px;
    width: 80%;
    margin: auto;
    margin-top: -25px;
    background-color: rgb(253, 63, 63);

    .tupin {
      height: 400px;
      width: 60%;
      // background-color: crimson;

      margin-top: 22px;
      display: flex;
      padding-top: 29px;
      padding-left: 80px;
      .imgb1 {
        height: 400px;
        .img3 {
          height: 100%;
        }
      }
      .wtext-xq {
        height: 250px;
        width: 200px;
        // background-color: darksalmon;
        margin-left: 40px;
        margin-top: 80px;
        h1 {
          font-size: 25px;
          color: white;
          text-align: left;
          letter-spacing: 2px;
        }
        .zuozhe {
          color: white;
          font-size: 12px;
          text-align: left;
          margin-top: 10px;
        }
        .price2 {
          font-size: 20px;
          color: white;
          text-align: left;
          margin-top: 30px;
        }
        .imgb3 {
          height: 30px;
          width: 150px;
          // background-color: darkturquoise;
          display: flex;
          align-items: center;
          margin-top: 15px;
          .img3 {
            height: 15px;
            width: 15px;
          }
          .pinlunm {
            font-size: 10px;
          }
        }
        .cart {
          width: 200px;
          height: 60px;
          //   background-color: bisque;
          display: flex;
          justify-content: space-between;
          align-items: center;
          button {
            width: 140px;
            height: 40px;
            background-color: white;
            border: 1px solid white;
            border-radius: 50px;
            color: black;
            font-weight: 100;
          }
          .img4 {
            width: 35px;
            height: 35px;
            background-color: rgb(253, 63, 63);
            border-radius: 100px;
            display: flex;
            align-items: center;
            border: 1px solid white;
            line-height: 35px;
            img {
              padding-left: 6px;
              display: block;
              width: 20px;
              height: 20px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .miaoshu {
    width: 70%;
    margin: auto;
    background-color: rgb(255, 252, 252);
    .p {
      // display: block;
      height: 200px;
      width: 750px;
      // padding-top: 30px;
      // background-color: azure;
      font-size: 16px;
      line-height: 25px;
      text-align: left;
    }
    .miaoshu-nav {
      width: 350px;
      height: 45px;
      margin-top: 80px;
      // background-color: burlywood;
      margin-bottom: 30px;
      display: flex;

      span {
        display: block;
        width: 80px;
        height: 35px;
        // background-color: rgb(253, 63, 63);
        background-color: white;
        color: black;
        margin-left: 10px;
        line-height: 35px;
        letter-spacing: 2px;
        border-radius: 40px;
        border: 1px solid grey;
      }
    }
  }

  // 加入实时通讯
  .join {
    width: 100%;
    margin: auto;
    // background-color: blueviolet;
    margin-top: 100px;
    .joinbox {
      width: 100%;
      height: 180px;
      // background-color: antiquewhite;
      margin: auto;
      position: relative;
      .img5 {
        width: 80%;
        height: 351px;
      }
      .join-up {
        height: 200px;
        width: 500px;
        // background-color: antiquewhite;
        position: absolute;
        top: 60px;
        left: 520px;
        h2 {
          height: 50px;
          width: 200px;
          // background-color: aqua;
          margin: auto;
          color: white;
          font-size: 25px;
          line-height: 50px;
          // 文字间距
          letter-spacing: 3px;
        }
        a {
          display: block;
          width: 130px;
          height: 50px;
          margin: auto;
          // background-color: aquamarine;
          margin-top: 30px;
          border-radius: 40px;
          line-height: 50px;
          color: white;
          letter-spacing: 3px;
          background-color: rgb(253, 63, 63);
        }
      }
    }
  }
}
</style>